<template>
  <div class="floor-layout tpl-71">
    <div class="layout-main">
      <div class="video-list" :class="data.blockClass"
        :style="`padding:${data.blockStyle.videoPadding/2}px ${data.blockStyle.pagePadding}px;
        margin-left:-${data.blockStyle.videoPadding/2}px;
        margin-right:-${data.blockStyle.videoPadding/2}px;`">
        <div class="video-item" v-for="(block, index) in data.blockList" :key="index" :style="`padding:${data.blockStyle.videoPadding/2}px;`">
          <div class="video-box" :style="`border-radius:${data.blockStyle.radius}px;`">
            <div class="video-source">
              <video controls="controls">
                <source :src="block.block_value.video_url" type="video/mp4">
              </video>
              <div class="video-image" :style="`background-image: url(${block.block_value.video_image});`"></div>
            </div>
            <div v-if="data.blockStyle.showTitle || data.blockStyle.showDes || data.blockStyle.showTime" class="video-text">
              <div v-if="data.blockStyle.showTitle" class="title_n">{{block.block_value.video_name}}</div>
              <div v-if="data.blockStyle.showDes" class="title_s">{{block.block_value.video_des}}</div>
              <div v-if="data.blockStyle.showTime" class="time">{{block.block_value.video_time}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '../mixin'
  import request from '@/utils/request'
  import { api } from '~/ui-domain'

  const noImg = '';
  export default {
    name: 'tpl_71',
    mixins: [mixin],
    title: '视屏模块',
    dataTpl: {
      tpl_id: 71,
      blockList: [
        {
          block_type: 'VIDEO',
          block_value: {
            'video_url': null,
            'video_image': noImg,
            'video_name': '视频名称视频名称',
            'video_des': '视频描述视频描述',
            'video_time': 'YYYY-MM-DD HH:MM:SS'
          },
          block_opt: ''
        },
        {
          block_type: 'VIDEO',
          block_value: {
            'video_url': null,
            'video_image': noImg,
            'video_name': '视频名称视频名称',
            'video_des': '视频描述视频描述',
            'video_time': 'YYYY-MM-DD HH:MM:SS'
          },
          block_opt: ''
        },
        {
          block_type: 'VIDEO',
          block_value: {
            'video_url': null,
            'video_image': noImg,
            'video_name': '视频名称视频名称',
            'video_des': '视频描述视频描述',
            'video_time': 'YYYY-MM-DD HH:MM:SS'
          },
          block_opt: ''
        }
      ],
      blockType: 'VIDEO', // 'VIDEO'
      blockClass: 'row_one', // row_one, row_two
      blockStyle: {
        pagePadding: 15, // 页面间距
        videoPadding: 10, // 视屏间距
        radius: 4, // 视屏角度
        showTitle: true, // 显示标题
        showDes: true, // 显示描述
        showTime: true // 显示发布时间
      }
    }
  }
</script>
